

<template>
  <div class="bgColor">
    <div class="mainbox">
      <div class="majorList" v-if="courseData.length > 0">
        <div
          class="itembox"
          v-for="(item, index) in courseData"
          @click="gotoDetail(item)"
        >
          <img class="majorimg" :src="item.cover" alt="" />
          <div class="infobox">
            <p class="title">{{ item.courseName }}</p>
            <div class="flexbox">
              <div class="flex">
                <img class="icon" src="../assets/coursei.png" alt="" />
                <span class="spancss">{{ item.unitname }}</span>
              </div>
            </div>
            <div class="flexbox">
              <div class="flex">
                <img class="icon" src="../assets/coursei2.png" alt="" />
                <span class="spancss">{{ item.displayname }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <empty v-else></empty>
      <div class="pagination" v-if="courseData.length > 0">
        <el-pagination
          background
          layout="prev, pager, next,total,jumper"
          :total="total"
          @current-change="sizeChange"
          :current-page="params.pageNum"
          :page-size="params.pageSize"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { getCourse } from '@/api/api.js'
import { reactive } from 'vue'
import { eventBus } from '@/utils/eventBus.js'
import empty from '@/components/empty.vue'
const params = reactive({
  projectId: '2utrackwo41egqxjetrgja',
  coursetype: 1,
  pagesize: 16,
  pageNum: 1,
  search_name: '',
})

const total = ref(0)
const courseData = ref([])

function webListApi() {
  getCourse(params).then((res) => {
    courseData.value = JSON.parse(res.list).obj
    total.value = res.totalCount
  })
}
webListApi()
function sizeChange(size) {
  params.pageNum = size
  webListApi()
}

function gotoDetail(item) {
  window.open(`https://zyk.icve.com.cn/courseDetailed?id=${item.id}`)
}
function searchHandle(value) {
  params.search_name = value
  webListApi()
}
onMounted(() => {
  eventBus.$off('searchHandleCourse', searchHandle)
  eventBus.$on('searchHandleCourse', searchHandle)
})
onBeforeUnmount(() => {
  eventBus.$off('searchHandleCourse', searchHandle)
})
</script>
<style lang="scss" scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
  margin-top: 20px;
}
.majorList {
  display: flex;
  flex-wrap: wrap;
}
.bgColor {
  min-height: 528px;
}
.flexbox {
  display: flex;
  justify-content: space-between; /* 实现两端对齐 */
  margin-bottom: 6px;
}
.flex {
  display: flex;
  align-items: center;
}
.spancss {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #8d9099;
  margin-left: 8px;
}
.title {
  width: 230px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 12px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #2e2f33;
}
.infobox {
  padding: 8px 12px 0px 12px;
}
.itembox {
  width: 305px;
  height: 286px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin-top: 28px;
  margin-right: 20px;
  transition: transform 0.3s ease;
  overflow: hidden;
  cursor: pointer;
  .majorimg {
    height: 172px;
    width: 100%;
  }
}
.itembox:hover {
  transform: translateY(-8px);
  box-shadow: 0px 4px 12px 0px rgba(0, 39, 60, 0.12);
  .title {
    color: #178fd1;
  }
}
.itembox:nth-child(4n) {
  margin-right: 0;
}
</style>
